<template>
  <div class="mt-100">
    <a-row>
      <a-col :span="12"></a-col>
      <a-col :span="8">
        <a-form
          id="components-form-demo-normal-login"
          :form="form"
          class="login-form"
          @submit="handleSubmit"
        >
          <a-form-item>
            <a-input
              v-decorator="[
                'username',
                { rules: [{ required: true, message: '请输入用户名' }] }
              ]"
              placeholder="用户名"
            >
              <a-icon
                slot="prefix"
                type="user"
                style="color: rgba(0,0,0,.25)"
              />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              v-decorator="[
                'password',
                { rules: [{ required: true, message: '请输入你的密码' }] }
              ]"
              type="password"
              placeholder="密码"
            >
              <a-icon
                slot="prefix"
                type="lock"
                style="color: rgba(0,0,0,.25)"
              />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-alert
              :message="errorMsg"
              type="error"
              v-if="loginErrorMsg"
              closable
              @close="closeLoginMsg"
              showIcon
            />
            <a-button
              type="primary"
              html-type="submit"
              class="login-form-button"
              >登录</a-button
            >
            <span class="login-form-forgot color-primary u-s-none"
              >忘记密码</span
            >
            <span @click="goRegister" class="color-primary u-s-none"
              >注册一个</span
            >
          </a-form-item>
        </a-form>
      </a-col>
      <a-col :span="4"></a-col>
    </a-row>
  </div>
</template>

<script lang="ts" src="./login.ts"></script>

<style lang="scss">
@import './login.scss';
</style>
